/* Custom CSS for InnovateEdu - Dynamic Learning Flow Design */
/* --- Variables --- */
:root {
--navy-blue: #1A2C42;
--teal-accent: #00C9A7;
--coral-orange: #FF6B6B;
--light-grey: #F0F2F5;
--medium-grey: #D1D5DB;
--dark-text: #2C3E50;
--light-text: #606C7E;
--white: #FFFFFF;
--font-heading: 'Montserrat', sans-serif;
--font-body: 'Lato', sans-serif;
--transition-speed: 0.35s ease-out; /* Slightly longer and smoother transition */
--card-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); /* More pronounced shadow */
--card-hover-shadow: 0 15px 50px rgba(0, 0, 0, 0.2); /* Deeper hover shadow */
--border-radius-lg: 20px; /* New variable for larger rounded corners */
}
/* --- General Styles --- */
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: var(--font-body);
font-size: 16px; /* Base font size for better rem scaling */
color: var(--light-text);
background-color: var(--light-grey);
margin: 0;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden; /* Prevent horizontal scroll from animations */
}
.site-wrapper {
position: relative;
}
.container {
max-width: 1280px;
margin: 0 auto;
padding: 0 30px; /* Increased container padding */
}
/* --- Typography --- */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
color: var(--dark-text);
line-height: 1.2;
margin-top: 0;
margin-bottom: 0.8em; /* Consistent bottom margin */
}
h1 { font-size: 4.2rem; font-weight: 800; } /* Larger, bolder H1 */
h2 { font-size: 3rem; font-weight: 700; }
h3 { font-size: 2.2rem; font-weight: 600; }
h4 { font-size: 1.6rem; font-weight: 600; }
p {
margin-bottom: 1.5rem; /* Increased paragraph spacing */
font-size: 1.05rem; /* Slightly larger body text */
}
a {
text-decoration: none;
color: var(--teal-accent);
transition: color var(--transition-speed);
}
a:hover {
color: var(--navy-blue);
text-decoration: underline; /* Subtle underline on hover for links */
}
/* --- Buttons --- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 16px 35px; /* Increased padding */
border-radius: 50px;
font-weight: 700; /* Bolder text */
font-size: 1.05rem; /* Slightly larger font */
letter-spacing: 0.7px; /* Increased letter spacing */
cursor: pointer;
border: 2px solid transparent;
transition: all var(--transition-speed);
text-transform: uppercase;
}
.btn:focus-visible { /* Accessibility focus style */
outline: 2px solid var(--coral-orange);
outline-offset: 3px;
}
.btn-primary {
background-color: var(--teal-accent);
color: var(--white);
box-shadow: 0 10px 25px rgba(0, 201, 167, 0.4); /* Stronger shadow */
}
.btn-primary:hover {
background-color: #00A68A; /* Slightly darker teal on hover */
box-shadow: 0 12px 30px rgba(26, 44, 66, 0.5); /* Enhanced hover shadow */
transform: translateY(-3px); /* More pronounced lift */
}
.btn-secondary {
background-color: var(--teal-accent);
color: var(--white);
box-shadow: 0 10px 25px rgba(50, 205, 191, 0.4);
}
.btn-secondary:hover {
background-color: #00c9a7; /* Slightly darker coral on hover */
box-shadow: 0 12px 30px rgba(26, 44, 66, 0.5);
transform: translateY(-3px);
}
.btn-outline {
border-color: var(--teal-accent);
color: var(--teal-accent);
background: transparent;
}
.btn-outline:hover {
background-color: var(--teal-accent);
color: var(--white);
transform: translateY(-3px);
}
.btn-outline-dark { /* For 'View All Courses' button */
border-color: var(--dark-text);
color: var(--dark-text);
background: transparent;
}
.btn-outline-dark:hover {
background-color: var(--dark-text);
color: var(--white);
transform: translateY(-3px);
}
.btn-ghost {
background: transparent;
color: var(--dark-text);
border: none;
padding: 12px 18px; /* Adjusted padding */
text-transform: capitalize;
font-weight: 500;
}
.btn-ghost:hover {
color: var(--teal-accent);
background-color: rgba(0, 201, 167, 0.08); /* Stronger subtle background */
border-radius: 10px; /* More rounded */
}
.btn-animated {
position: relative;
overflow: hidden;
z-index: 1;
}
.btn-animated::before {
content: '';
position: absolute;
top: 0;
left: -120%; /* Start further left for a wider swipe */
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.2); /* Brighter overlay for ripple effect */
transition: all 0.6s ease; /* Slower, smoother swipe */
transform: skewX(-25deg); /* More pronounced skew */
z-index: -1;
}
.btn-animated:hover::before {
left: 120%; /* End further right */
}
/* --- Header --- */
.main-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 100;
padding: 25px 0; /* Increased initial padding */
background-color: transparent;
transition: background-color var(--transition-speed), box-shadow var(--transition-speed), padding var(--transition-speed);
transform: translateY(0); /* Ensure header starts at 0 to prevent FOUC */
}
.main-header.scrolled {
background-color: rgba(255, 255, 255, 0.98); /* More opaque on scroll */
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.12); /* Stronger shadow on scroll */
backdrop-filter: blur(10px); /* Increased blur */
padding: 15px 0; /* Reduced padding when scrolled */
}
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1400px;
margin: 0 auto;
padding: 0 40px;
}
.logo {
font-family: var(--font-heading);
font-weight: 800;
font-size: 2.2rem; /* Slightly larger logo */
color: var(--white); /* White logo initially */
display: flex;
align-items: center;
}
.logo span {
color: var(--teal-accent);
}
.main-header.scrolled .logo {
color: var(--dark-text); /* Ensure logo color remains dark on scroll */
}
.nav-menu {
flex-grow: 1;
display: flex;
justify-content: center;
}
.nav-list {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 40px; /* Increased gap between nav items */
}
.nav-link {
font-weight: 600;
color: var(--white); /* White links initially */
padding: 10px 0; /* Increased vertical padding */
position: relative;
transition: color var(--transition-speed);
}
.main-header.scrolled .nav-link {
color: var(--dark-text); /* Dark links on scroll */
}
.nav-link::after {
content: '';
position: absolute;
left: 50%;
bottom: 0;
width: 0;
height: 3px;
background: var(--teal-accent);
transition: width var(--transition-speed) ease-in-out, left var(--transition-speed) ease-in-out; /* Smoother animation */
border-radius: 2px;
}
.nav-link:hover::after,
.nav-link.active::after {
width: 100%;
left: 0;
}
.nav-link:focus-visible { /* Accessibility focus style */
outline: 2px solid var(--coral-orange);
outline-offset: 3px;
border-radius: 4px;
}
.user-actions {
display: flex;
align-items: center;
gap: 25px; /* Increased gap */
}
.cart-link {
position: relative;
color: var(--white); /* White cart icon initially */
font-size: 1.6rem; /* Larger icon */
transition: color var(--transition-speed);
}
.main-header.scrolled .cart-link {
color: var(--dark-text); /* Dark cart icon on scroll */
}
.cart-link:hover {
color: var(--teal-accent);
}
.cart-link:focus-visible { /* Accessibility focus style */
outline: 2px solid var(--coral-orange);
outline-offset: 3px;
border-radius: 50%;
}
.cart-badge {
position: absolute;
top: -10px; /* Adjusted position */
right: -12px; /* Adjusted position */
background-color: var(--coral-orange);
color: var(--white);
font-size: 0.8rem; /* Slightly larger badge text */
font-weight: 700;
border-radius: 50%;
padding: 4px 8px; /* Larger padding */
min-width: 25px; /* Minimum width for two digits */
text-align: center;
line-height: 1;
border: 2px solid var(--white);
}
.user-dropdown {
position: relative;
}
.user-name {
font-weight: 600;
color: var(--white); /* White user name initially */
cursor: pointer;
display: flex;
align-items: center;
gap: 10px; /* Increased gap */
transition: color var(--transition-speed);
}
.main-header.scrolled .user-name {
color: var(--dark-text); /* Dark user name on scroll */
}
.user-name i {
font-size: 0.9rem; /* Slightly larger icon */
transition: transform var(--transition-speed);
}
.user-name:focus-visible { /* Accessibility focus style */
outline: 2px solid var(--coral-orange);
outline-offset: 3px;
border-radius: 4px;
}
.user-dropdown.active .user-name i {
transform: rotate(180deg);
}
.dropdown-menu {
position: absolute;
top: calc(100% + 20px); /* Increased distance from header */
right: 0;
background-color: var(--white);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2); /* Deeper shadow */
border-radius: var(--border-radius-lg); /* Larger rounded corners */
list-style: none;
padding: 12px 0; /* Increased padding */
margin: 0;
opacity: 0;
visibility: hidden;
transform: translateY(-15px); /* More pronounced initial translateY */
transition: opacity var(--transition-speed), transform var(--transition-speed), visibility var(--transition-speed);
min-width: 200px; /* Wider menu */
}
.user-dropdown.active .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-menu li a {
display: flex;
align-items: center;
gap: 12px; /* Increased gap */
padding: 14px 25px; /* Increased padding */
white-space: nowrap;
color: var(--dark-text);
font-weight: 500;
}
.dropdown-menu li a:hover {
background-color: var(--light-grey);
text-decoration: none;
color: var(--teal-accent);
}
.dropdown-menu li a:focus-visible { /* Accessibility focus style */
outline: 2px solid var(--coral-orange);
outline-offset: -2px; /* Offset inwards for menu items */
border-radius: 8px;
}
.dropdown-menu li a i {
color: var(--teal-accent);
}
.mobile-toggle {
display: none; /* Hidden on desktop */
}
/* --- Hero Section --- */
.hero-section {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
overflow: hidden;
text-align: center;
padding: 150px 20px 100px; /* Increased padding */
}
.hero-bg-dynamic {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* Enhanced gradient with more depth and subtle texture */
background: linear-gradient(135deg, var(--navy-blue) 0%, #2A4058 30%, #2F5A6C 70%, var(--teal-accent) 100%);
background-size: 500% 500%; /* Larger background size for more dynamic shift */
animation: gradientShift 25s ease infinite; /* Slower, smoother animation */
z-index: -1;
/* Adding a subtle overlay texture */
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;charset=utf8,');
background-repeat: repeat;
opacity: 0.5; /* Subtle texture opacity */
}
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.hero-content-wrapper {
max-width: 1000px; /* Wider content area */
position: relative;
z-index: 2;
color: var(--white);
}
.hero-title {
font-size: 5.5rem; /* Even larger H1 for impact */
font-weight: 800;
color: var(--white);
line-height: 1.05;
margin-bottom: 30px;
opacity: 0;
transform: translateY(40px); /* More pronounced initial translateY */
animation: fadeInMoveUp 1.2s forwards cubic-bezier(0.23, 1, 0.32, 1); /* Slower, smoother animation */
}
.hero-title span {
color: var(--teal-accent);
}
.hero-subtitle {
font-size: 1.6rem; /* Larger subtitle */
color: rgba(255, 255, 255, 0.95); /* Slightly brighter subtitle text */
margin-bottom: 50px; /* More spacing */
max-width: 800px;
margin-left: auto;
margin-right: auto;
opacity: 0;
transform: translateY(40px);
animation: fadeInMoveUp 1.2s forwards cubic-bezier(0.23, 1, 0.32, 1);
animation-delay: 0.4s; /* Increased delay */
}
.hero-buttons {
display: flex;
justify-content: center;
gap: 30px; /* Increased gap */
opacity: 0;
transform: translateY(40px);
animation: fadeInMoveUp 1.2s forwards cubic-bezier(0.23, 1, 0.32, 1);
animation-delay: 0.8s; /* Increased delay */
}
@keyframes fadeInMoveUp {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* --- Sections General --- */
section {
padding: 120px 0; /* Increased section padding */
position: relative;
overflow: hidden;
}
.section-header {
text-align: center;
margin-bottom: 80px; /* Increased margin */
max-width: 900px; /* Wider header area */
margin-left: auto;
margin-right: auto;
}
.sub-heading {
font-size: 1.1rem; /* Slightly larger sub-heading */
font-weight: 700;
text-transform: uppercase;
color: var(--coral-orange);
letter-spacing: 3px; /* More letter spacing */
display: block;
margin-bottom: 15px; /* Increased margin */
}
.section-title {
margin: 10px 0 0;
color: var(--dark-text);
font-size: 3.2rem; /* Larger section titles */
}
/* --- Features Section --- */
.features-section {
background-color: var(--white);
padding-bottom: 80px; /* Increased padding */
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 45px; /* Increased gap */
}
.feature-card {
text-align: center;
background-color: var(--light-grey);
padding: 50px; /* Increased padding */
border-radius: var(--border-radius-lg); /* Larger rounded corners */
box-shadow: var(--card-shadow);
transition: all var(--transition-speed);
}
.feature-card:hover {
transform: translateY(-15px) scale(1.03); /* More pronounced lift and scale */
box-shadow: var(--card-hover-shadow);
}
.icon-container {
font-size: 4rem; /* Larger icons */
color: var(--teal-accent);
margin-bottom: 30px; /* Increased margin */
line-height: 1;
}
.card-title {
margin-top: 0;
color: var(--dark-text);
font-size: 1.8rem; /* Larger card titles */
}
.feature-card p {
font-size: 1.05rem;
line-height: 1.7;
}
/* --- Courses Section --- */
.courses-section {
background-color: var(--light-grey);
}
.courses-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 40px; /* Increased gap */
}
.course-card {
background-color: var(--white);
border-radius: var(--border-radius-lg); /* Larger rounded corners */
overflow: hidden;
box-shadow: var(--card-shadow);
transition: all var(--transition-speed);
}
.course-card:hover {
transform: translateY(-15px) scale(1.03); /* More pronounced lift and scale */
box-shadow: var(--card-hover-shadow);
}
.course-image {
width: 100%;
height: 250px; /* Taller images */
object-fit: cover;
transition: transform 0.6s ease; /* Slower image zoom */
}
.course-card:hover .course-image {
transform: scale(1.08); /* More pronounced zoom */
}
.card-content {
padding: 35px; /* Increased padding */
}
.course-title {
margin-bottom: 12px;
font-size: 1.85rem; /* Larger course titles */
color: var(--dark-text);
}
.course-description {
font-size: 1rem;
color: var(--light-text);
margin-bottom: 25px; /* Increased margin */
}
.course-meta {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.9rem; /* Slightly larger meta text */
color: var(--light-text);
/* margin-top: 20px; /* Increased margin */
/* padding-top: 20px; Increased padding */
/* border-top: 1px solid var(--medium-grey); */
}
.course-meta span {
display: flex;
align-items: center;
gap: 10px; /* Increased gap */
}
.course-meta i {
color: var(--teal-accent);
}
.course-card .btn {
margin-top: 30px; /* Increased margin */
width: 100%;
text-align: center;
}
.text-center {
text-align: center;
}
.mt-5 {
margin-top: 60px; /* Increased margin */
}
/* --- CTA Section --- */
.cta-section {
/* More prominent background for CTA */
background: linear-gradient(45deg, var(--navy-blue) 0%, #2A4058 50%, var(--teal-accent) 100%);
background-size: 300% 300%;
animation: gradientShiftCta 15s ease infinite; /* New animation for CTA gradient */
text-align: center;
padding: 120px 20px; /* Increased padding */
color: var(--white);
}
@keyframes gradientShiftCta {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.cta-content {
max-width: 900px; /* Wider content area */
margin: 0 auto;
}
.cta-title {
color: var(--white);
margin-bottom: 20px; /* Increased margin */
font-size: 3.5rem; /* Larger CTA title */
}
.cta-subtitle {
font-size: 1.35rem; /* Larger subtitle */
color: rgba(255, 255, 255, 0.95);
margin-bottom: 50px; /* Increased margin */
}
/* --- Footer --- */
.main-footer {
background-color: var(--navy-blue);
color: rgba(255, 255, 255, 0.75); /* Slightly brighter text */
padding: 100px 0 40px; /* Increased padding */
}
.footer-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 50px; /* Increased gap */
max-width: 1280px;
margin: 0 auto;
padding: 0 30px;
}
.footer-col .logo {
color: var(--white);
margin-bottom: 20px; /* Increased margin */
font-size: 2.2rem; /* Consistent logo size */
}
.footer-col h4 {
color: var(--white);
font-size: 1.4rem; /* Slightly larger footer headings */
margin-bottom: 30px; /* Increased margin */
}
.footer-col ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-col li {
margin-bottom: 15px; /* Increased spacing */
}
.footer-col a {
color: rgba(255, 255, 255, 0.75);
display: flex;
align-items: center;
gap: 12px; /* Increased gap */
transition: all var(--transition-speed); /* Transition for full link */
}
.footer-col a:hover {
color: var(--teal-accent);
transform: translateX(8px); /* More pronounced slide effect */
}
.footer-col a:focus-visible { /* Accessibility focus style */
outline: 2px solid var(--coral-orange);
outline-offset: 3px;
border-radius: 4px;
}
.footer-col i {
color: var(--teal-accent);
font-size: 1.1rem; /* Slightly larger icons */
}
.social-links {
margin-top: 35px; /* Increased margin */
display: flex; /* Ensure inline for proper gap */
gap: 20px; /* Gap between icons */
}
.social-links a {
font-size: 1.8rem; /* Larger icons */
color: rgba(255, 255, 255, 0.75);
transition: color var(--transition-speed), transform var(--transition-speed);
}
.social-links a:hover {
color: var(--teal-accent);
transform: translateY(-5px); /* More pronounced lift */
}
.social-links a:focus-visible { /* Accessibility focus style */
outline: 2px solid var(--coral-orange);
outline-offset: 3px;
border-radius: 50%;
}
.copyright-bar {
text-align: center;
margin-top: 70px; /* Increased margin */
padding-top: 35px; /* Increased padding */
border-top: 1px solid rgba(255, 255, 255, 0.15); /* Slightly thicker border */
font-size: 0.95rem; /* Slightly larger copyright text */
}
/* --- General Animations for Scroll --- */
.animate-on-scroll {
opacity: 0;
transform: translateY(40px); /* More pronounced initial translateY */
transition: opacity 0.9s ease-out, transform 0.9s ease-out; /* Slower, smoother animation */
}
.animate-on-scroll.is-visible {
opacity: 1;
transform: translateY(0);
}
/* --- Media Queries --- */
@media (max-width: 1200px) {
h1 { font-size: 3.8rem; }
h2 { font-size: 2.6rem; }
.hero-title { font-size: 4.5rem; }
.hero-subtitle { font-size: 1.4rem; }
.section-title { font-size: 2.8rem; }
.header-container { padding: 0 30px; }
}
@media (max-width: 992px) {
.nav-menu, .user-actions {
display: none;
}
.mobile-toggle {
display: block;
font-size: 2rem; /* Larger mobile toggle icon */
cursor: pointer;
color: var(--dark-text);
background: none;
border: none;
padding: 0;
}
.main-header {
background-color: var(--white);
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.08);
padding: 18px 0; /* Adjusted padding */
}
.main-header .logo,
.main-header .mobile-toggle,
.main-header .cart-link {
color: var(--dark-text);
}
.hero-title { font-size: 3.5rem; }
.hero-subtitle { font-size: 1.2rem; }
.hero-buttons { flex-direction: column; gap: 20px; }
.section-title { font-size: 2.4rem; }
.footer-container {
grid-template-columns: 1fr;
text-align: center;
gap: 40px;
}
.footer-col ul {
margin-top: 15px;
}
.footer-col li {
justify-content: center;
}
.footer-col .logo { margin-bottom: 25px; justify-content: center; font-size: 2rem;}
.social-links { margin-top: 30px; justify-content: center; }
.footer-col h4 { font-size: 1.3rem; margin-bottom: 20px;}
.cta-title { font-size: 3rem; }
.cta-subtitle { font-size: 1.2rem; }
}
@media (max-width: 768px) {
h1 { font-size: 3.2rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 1.8rem; }
p { font-size: 1rem; }
.hero-section { min-height: 70vh; padding: 120px 20px 80px; }
.hero-title { font-size: 2.8rem; margin-bottom: 20px; }
.hero-subtitle { font-size: 1.1rem; margin-bottom: 40px; }
.hero-buttons .btn { width: 90%; padding: 14px 25px; font-size: 0.95rem; }
.features-grid, .courses-grid {
grid-template-columns: 1fr;
}
.feature-card, .course-card { padding: 35px; }
.card-content { padding: 30px; }
.section-title { font-size: 2rem; }
.sub-heading { font-size: 0.9rem; letter-spacing: 2px;}
.cta-title { font-size: 2.5rem; }
.cta-subtitle { font-size: 1.1rem; }
.footer-col a { justify-content: center; } /* Center footer links on mobile */
}
@media (max-width: 480px) {
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.6rem; }
.hero-title { font-size: 2.2rem; }
.hero-subtitle { font-size: 0.95rem; }
.section-title { font-size: 1.8rem; }
.cta-title { font-size: 2rem; }
.cta-subtitle { font-size: 1rem; }
}
/* --- Mobile Nav Overlay --- */
.mobile-nav-overlay {
position: fixed;
top: 0;
right: 0;
width: 100%;
max-width: 380px; /* Slightly wider max-width for overlay */
height: 100%;
background-color: var(--white);
z-index: 200;
transform: translateX(100%);
transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Slower, smoother slide animation */
padding: 35px; /* Increased padding */
box-shadow: -8px 0 40px rgba(0,0,0,0.2); /* Deeper shadow */
display: flex;
flex-direction: column;
}
.mobile-nav-overlay.active {
transform: translateX(0);
}
.mobile-nav-header {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--medium-grey);
padding-bottom: 30px; /* Increased padding */
margin-bottom: 35px; /* Increased margin */
}
.mobile-logo {
font-size: 2rem; /* Consistent logo size */
font-weight: bold;
color: var(--dark-text);
display: flex;
align-items: center;
}
.mobile-logo span {
color: var(--teal-accent);
}
.mobile-close-btn {
font-size: 2rem; /* Larger close icon */
cursor: pointer;
background: none;
border: none;
color: var(--dark-text);
}
.mobile-nav-list {
list-style: none;
padding: 0;
margin: 0;
flex-grow: 1;
}
.mobile-nav-list li {
margin-bottom: 20px; /* Increased spacing */
}
.mobile-nav-list a {
display: block;
font-size: 1.4rem; /* Larger font size */
font-weight: 600;
color: var(--dark-text);
padding: 15px 0; /* Increased padding */
border-radius: 10px; /* More rounded */
transition: background-color 0.25s ease, color 0.25s ease, padding-left 0.25s ease; /* Smoother transition */
}
.mobile-nav-list a:hover {
background-color: var(--light-grey);
color: var(--teal-accent);
padding-left: 15px; /* More pronounced indent on hover */
}
.mobile-nav-list a:focus-visible { /* Accessibility focus style */
outline: 2px solid var(--coral-orange);
outline-offset: 3px;
border-radius: 8px;
}
/* Custom CSS for InnovateEdu - About Us Page (Dynamic Learning Flow Design) */
/* Import global variables for consistency */
@import url("innovate-edu-style.css"); /* Assuming global styles are in innovate-edu-style.css */
/* --- Page-Specific Hero Section --- */
.hero-section-about {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 70vh; /* Shorter hero for inner pages */
overflow: hidden;
text-align: center;
padding: 150px 20px 80px;
background-color: var(--navy-blue); /* Fallback background */
}
.hero-bg-dynamic-about {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* A slightly different gradient or pattern for variety */
background: linear-gradient(90deg, #1A2C42 0%, #2A4058 100%);
background-size: 300% 300%;
animation: gradientShiftAbout 20s ease infinite; /* New animation for about page hero */
z-index: -1;
&::after { /* Subtle texture */
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;charset=utf8,');
background-repeat: repeat;
opacity: 0.6;
}
}
@keyframes gradientShiftAbout {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.hero-content-about {
max-width: 800px;
position: relative;
z-index: 2;
color: var(--white);
}
.hero-content-about h1 {
font-size: 4.5rem; /* Large, impactful heading */
font-weight: 800;
color: var(--white);
margin-bottom: 20px;
line-height: 1.1;
}
.hero-content-about h1 span {
color: var(--teal-accent); /* Highlight accent color */
}
.hero-content-about p {
font-size: 1.35rem; /* Readable subtitle */
color: rgba(255, 255, 255, 0.9);
max-width: 600px;
margin: 0 auto;
}
/* --- Mission Section --- */
.mission-section {
background-color: var(--white);
padding: 100px 0;
}
.mission-content-wrapper {
display: flex;
align-items: center;
gap: 60px; /* Increased gap */
margin-bottom: 80px;
}
.mission-text {
flex: 1;
text-align: left;
}
.mission-text h2 {
font-size: 2.5rem;
margin-bottom: 20px;
}
.mission-text p {
font-size: 1.05rem;
line-height: 1.8;
margin-bottom: 25px;
}
.mission-image-placeholder {
flex: 0 0 500px; /* Fixed width for image container */
max-width: 50%; /* Max width relative to parent */
position: relative;
transform: rotate(3deg); /* Subtle tilt for visual interest */
transition: transform 0.6s ease-in-out;
}
.mission-image-placeholder:hover {
transform: rotate(0deg) scale(1.02); /* Straighten and slightly enlarge on hover */
}
.mission-image-placeholder img {
display: block;
width: 100%;
height: auto;
border-radius: var(--border-radius-lg);
box-shadow: var(--card-hover-shadow); /* Stronger shadow for prominent image */
}
.mission-features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 40px;
margin-top: 60px; /* Space between text/image and features */
}
.mission-feature-card {
text-align: center;
background-color: var(--light-grey);
padding: 40px;
border-radius: var(--border-radius-lg);
box-shadow: var(--card-shadow);
transition: all var(--transition-speed);
}
.mission-feature-card:hover {
transform: translateY(-10px);
box-shadow: var(--card-hover-shadow);
background-color: var(--white); /* Lighten background on hover */
}
.mission-icon {
font-size: 3.5rem;
color: var(--teal-accent);
margin-bottom: 25px;
line-height: 1;
}
.mission-feature-card h3 {
font-size: 1.7rem;
color: var(--dark-text);
margin-bottom: 15px;
}
.mission-feature-card p {
font-size: 1rem;
line-height: 1.6;
}
/* --- Values Section --- */
.values-section {
background-color: var(--light-grey);
padding: 100px 0;
}
.values-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
}
.value-card {
text-align: center;
background-color: var(--white);
padding: 45px;
border-radius: var(--border-radius-lg);
box-shadow: var(--card-shadow);
transition: all var(--transition-speed);
}
.value-card:hover {
transform: translateY(-12px);
box-shadow: var(--card-hover-shadow);
border: 2px solid var(--teal-accent); /* Highlight border on hover */
}
.value-icon {
font-size: 3.8rem;
color: var(--coral-orange); /* Unique color for values icons */
margin-bottom: 25px;
line-height: 1;
}
.value-card h3 {
font-size: 1.8rem;
color: var(--dark-text);
margin-bottom: 15px;
}
.value-card p {
font-size: 1rem;
line-height: 1.6;
}
/* --- Team Section --- */
.team-section {
background-color: var(--white);
padding: 100px 0;
}
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 40px;
}
.team-card {
text-align: center;
background-color: var(--light-grey);
padding: 40px;
border-radius: var(--border-radius-lg);
box-shadow: var(--card-shadow);
transition: all var(--transition-speed);
}
.team-card:hover {
transform: translateY(-10px);
box-shadow: var(--card-hover-shadow);
background-color: var(--white);
}
.team-img-wrapper {
width: 180px; /* Fixed size for circular image */
height: 180px;
margin: 0 auto 25px;
border-radius: 50%;
overflow: hidden;
border: 5px solid var(--teal-accent); /* Border around image */
box-shadow: 0 0 0 8px rgba(0, 201, 167, 0.2); /* Outer ring shadow */
transition: all 0.4s ease;
}
.team-card:hover .team-img-wrapper {
border-color: var(--coral-orange); /* Change border color on hover */
box-shadow: 0 0 0 10px rgba(255, 107, 107, 0.3); /* Larger, coral shadow on hover */
transform: scale(1.05); /* Slight scale on image wrapper */
}
.team-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Placeholder for when image is not available */
.team-img-wrapper .fas {
font-size: 4rem;
color: var(--white);
background-color: var(--navy-blue);
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.team-card h3 {
font-size: 1.8rem;
color: var(--dark-text);
margin-bottom: 10px;
}
.team-card .role {
display: block;
font-size: 1rem;
color: var(--teal-accent);
font-weight: 600;
margin-bottom: 20px;
}
.team-card p {
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 25px;
}
.team-social {
display: flex;
justify-content: center;
gap: 15px;
margin-bottom: 30px;
}
.team-social a {
font-size: 1.4rem;
color: var(--light-text);
transition: all var(--transition-speed);
}
.team-social a:hover {
color: var(--teal-accent);
transform: translateY(-3px) scale(1.1);
}
.team-social a:focus-visible { /* Accessibility focus style */
outline: 2px solid var(--coral-orange);
outline-offset: 3px;
border-radius: 50%;
}
.btn-outline-alt { /* Specific button style for team contacts */
border-color: var(--coral-orange);
color: var(--coral-orange);
background: transparent;
}
.btn-outline-alt:hover {
background-color: var(--coral-orange);
color: var(--white);
transform: translateY(-3px);
}
/* --- Page-Specific CTA Section --- */
.cta-about-section {
background: linear-gradient(135deg, var(--teal-accent) 0%, #00967A 100%); /* Strong, vibrant gradient */
background-size: 300% 300%;
animation: gradientShiftCtaAbout 18s ease infinite; /* Distinct CTA animation */
text-align: center;
padding: 120px 20px;
color: var(--white);
border-radius: var(--border-radius-lg); /* Rounded corners for the CTA section itself */
margin: 0 30px 100px; /* Margins to show it as a distinct block */
box-shadow: 0 15px 50px rgba(0, 201, 167, 0.4);
}
@keyframes gradientShiftCtaAbout {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.cta-about-section h2 {
color: var(--white);
font-size: 3.5rem;
margin-bottom: 25px;
}
.cta-about-section p {
font-size: 1.35rem;
color: rgba(255, 255, 255, 0.95);
max-width: 800px;
margin: 0 auto 40px;
}
.cta-about-section .btn-secondary {
box-shadow: 0 10px 25px rgba(255, 255, 255, 0.3); /* White shadow for contrast */
}
.cta-about-section .btn-secondary:hover {
background-color: var(--navy-blue); /* Darker on hover */
}
/* --- Highlight Colors for Section Headers --- */
.section-title .highlight-primary {
color: var(--teal-accent);
}
.highlight-accent { /* For hero section's 'Us' */
color: var(--teal-accent);
}
/* --- Responsive Adjustments --- */
@media (max-width: 1200px) {
.hero-content-about h1 { font-size: 3.8rem; }
.hero-content-about p { font-size: 1.2rem; }
.mission-image-placeholder { flex: 0 0 400px; }
}
@media (max-width: 992px) {
.hero-section-about { min-height: 60vh; padding: 120px 20px 60px; }
.hero-content-about h1 { font-size: 3rem; }
.hero-content-about p { font-size: 1.1rem; }
.mission-content-wrapper { flex-direction: column; gap: 40px; margin-bottom: 60px; }
.mission-text { text-align: center; }
.mission-image-placeholder { max-width: 70%; flex: none; }
.mission-features-grid, .values-grid, .team-grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 30px;
}
.cta-about-section { margin: 0 20px 80px; padding: 80px 20px; }
.cta-about-section h2 { font-size: 2.8rem; }
.cta-about-section p { font-size: 1.1rem; }
}
@media (max-width: 768px) {
.hero-section-about { min-height: 50vh; padding: 100px 20px 50px; }
.hero-content-about h1 { font-size: 2.5rem; }
.hero-content-about p { font-size: 1rem; }
.mission-image-placeholder { max-width: 90%; }
.mission-features-grid, .values-grid, .team-grid {
grid-template-columns: 1fr;
gap: 25px;
}
.mission-section, .values-section, .team-section { padding: 80px 0; }
.section-header { margin-bottom: 60px; }
.section-title { font-size: 2.2rem; }
.sub-heading { font-size: 0.9rem; }
.cta-about-section { margin: 0 15px 60px; padding: 60px 15px; }
.cta-about-section h2 { font-size: 2.2rem; }
.cta-about-section p { font-size: 1rem; }
}
@media (max-width: 480px) {
.hero-section-about { min-height: 40vh; padding: 80px 15px 40px; }
.hero-content-about h1 { font-size: 2rem; }
.hero-content-about p { font-size: 0.9rem; }
.mission-image-placeholder { transform: rotate(0deg); } /* No tilt on small screens */
.section-title { font-size: 1.8rem; }
.cta-about-section h2 { font-size: 1.8rem; }
.cta-about-section p { font-size: 0.9rem; }
.mission-feature-card, .value-card, .team-card { padding: 30px; }
.team-img-wrapper { width: 150px; height: 150px; }
}
/* Custom CSS for InnovateEdu - All Courses Page (Dynamic Learning Flow Design) */
/* Import global variables and styles for consistency */
@import url("innovate-edu-style.css"); /* Assuming global styles are in innovate-edu-style.css */
/* --- Page-Specific Hero Section --- */
.hero-section-courses {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 65vh; /* Shorter hero for inner pages */
overflow: hidden;
text-align: center;
padding: 150px 20px 80px;
background-color: var(--navy-blue); /* Fallback background */
}
.hero-bg-dynamic-courses {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* A distinct gradient for the courses hero section */
background: linear-gradient(45deg, #1A2C42 0%, #2F5A6C 50%, var(--teal-accent) 100%);
background-size: 300% 300%;
animation: gradientShiftCourses 22s ease infinite; /* Unique animation */
z-index: -1;
&::after { /* Subtle texture overlay */
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;charset=utf8,');
background-repeat: repeat;
opacity: 0.7;
}
}
@keyframes gradientShiftCourses {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.hero-content-courses {
max-width: 800px;
position: relative;
z-index: 2;
color: var(--white);
}
.hero-content-courses h1 {
font-size: 4.5rem; /* Large, impactful heading */
font-weight: 800;
color: var(--white);
margin-bottom: 20px;
line-height: 1.1;
}
.hero-content-courses h1 span {
color: var(--coral-orange); /* Using coral for highlight on this page */
}
.hero-content-courses p {
font-size: 1.35rem; /* Readable subtitle */
color: rgba(255, 255, 255, 0.9);
max-width: 600px;
margin: 0 auto;
}
/* --- Courses Listing Section --- */
.courses-listing-section {
background-color: var(--light-grey);
padding: 100px 0; /* Consistent section padding */
}
.courses-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 40px; /* Consistent gap between cards */
}
.course-card {
background-color: var(--white);
border-radius: var(--border-radius-lg); /* Consistent rounded corners */
overflow: hidden;
box-shadow: var(--card-shadow); /* Consistent shadow */
transition: all var(--transition-speed); /* Consistent transition */
display: flex; /* Flex container for card content */
flex-direction: column;
}
.course-card:hover {
transform: translateY(-15px) scale(1.03); /* Consistent lift and scale */
box-shadow: var(--card-hover-shadow); /* Consistent hover shadow */
}
.course-header-card {
background-color: var(--navy-blue); /* Dark header for contrast */
padding: 25px 30px; /* Padding for header */
color: var(--white);
border-top-left-radius: var(--border-radius-lg);
border-top-right-radius: var(--border-radius-lg);
border-bottom: 3px solid var(--teal-accent); /* Accent line */
}
.course-header-card h3 {
font-size: 1.8rem; /* Larger title */
color: var(--white);
margin: 0;
line-height: 1.3;
}
.course-body-card {
padding: 30px;
display: flex;
flex-direction: column;
flex-grow: 1; /* Allow body to grow and push actions to bottom */
}
.course-body-card p {
font-size: 1rem;
line-height: 1.7;
color: var(--light-text);
margin-bottom: 25px;
flex-grow: 1; /* Allow description to take space */
}
.course-features-list {
list-style: none;
padding: 0;
margin: 0 0 25px 0; /* Margin below features */
/* border-top: 1px solid var(--medium-grey); */
padding-top: 20px;
}
.course-features-list li {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 12px;
font-size: 0.95rem;
color: var(--dark-text);
font-weight: 500;
}
.course-features-list li:last-child {
margin-bottom: 0;
}
.course-features-list li i {
color: var(--teal-accent);
font-size: 1.1rem;
}
.course-features-list li span {
font-weight: 700;
color: var(--navy-blue);
}
.course-price {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1.2rem;
font-weight: 700;
color: var(--dark-text);
padding: 20px 0;
/* border-top: 1px solid var(--medium-grey); */
margin-top: auto; /* Push price to bottom before actions */
}
.course-price span:last-child {
color: var(--coral-orange); /* Highlight price */
font-size: 1.4rem;
}
.course-actions-card {
margin-top: 25px;
text-align: center;
}
.course-actions-card .btn {
width: 100%; /* Full width buttons */
margin-top: 10px; /* Space between buttons if multiple */
}
.btn-danger { /* Style for "Remove from Cart" */
background-color: var(--coral-orange);
color: var(--white);
box-shadow: 0 8px 20px rgba(255, 107, 107, 0.4);
border-color: transparent;
}
.btn-danger:hover {
background-color: #E65A5A;
box-shadow: 0 10px 25px rgba(255, 107, 107, 0.5);
transform: translateY(-3px);
}
/* --- Session Message Boxes --- */
.message-box {
padding: 18px 25px;
border-radius: 12px;
margin-bottom: 30px;
font-size: 1.1rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 15px;
animation: fadeInScale 0.5s ease-out forwards;
opacity: 0; /* Start hidden for animation */
transform: scale(0.95); /* Start slightly smaller */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.message-box.fade-out {
animation: fadeOutScale 1s ease-out forwards;
}
@keyframes fadeInScale {
from { opacity: 0; transform: scale(0.95) translateY(20px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes fadeOutScale {
from { opacity: 1; transform: scale(1); }
to { opacity: 0; transform: scale(0.95) translateY(-20px); }
}
.success-message {
background-color: #e6ffed; /* Light green */
color: #28a745; /* Dark green */
border: 1px solid #c3e6cb;
}
.success-message::before { content: "\f058"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 1.3em;}
.error-message {
background-color: #fcebeb; /* Light red */
color: #dc3545; /* Dark red */
border: 1px solid #f5c6cb;
}
.error-message::before { content: "\f06a"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 1.3em;}
.info-message {
background-color: #e2f2ff; /* Light blue */
color: #007bff; /* Dark blue */
border: 1px solid #b8daff;
}
.info-message::before { content: "\f05a"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 1.3em;}
.no-courses-message {
text-align: center;
color: var(--light-text);
font-size: 1.3rem;
padding: 60px 20px;
background-color: var(--white);
border-radius: var(--border-radius-lg);
box-shadow: var(--card-shadow);
max-width: 600px;
margin: 50px auto;
}
/* --- Responsive Adjustments --- */
@media (max-width: 1200px) {
.hero-content-courses h1 { font-size: 3.8rem; }
.hero-content-courses p { font-size: 1.2rem; }
}
@media (max-width: 992px) {
.hero-section-courses { min-height: 55vh; padding: 120px 20px 60px; }
.hero-content-courses h1 { font-size: 3rem; }
.hero-content-courses p { font-size: 1.1rem; }
.courses-listing-section { padding: 80px 0; }
.courses-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
}
.course-header-card h3 { font-size: 1.6rem; }
.course-body-card { padding: 25px; }
.course-price span:last-child { font-size: 1.2rem; }
.message-box { font-size: 1rem; padding: 15px 20px; }
}
@media (max-width: 768px) {
.hero-section-courses { min-height: 45vh; padding: 100px 20px 50px; }
.hero-content-courses h1 { font-size: 2.5rem; }
.hero-content-courses p { font-size: 1rem; }
.courses-grid {
grid-template-columns: 1fr; /* Single column on smaller screens */
gap: 25px;
}
.course-header-card { padding: 20px 25px; }
.course-header-card h3 { font-size: 1.4rem; }
.course-body-card p { font-size: 0.95rem; }
.course-features-list li { font-size: 0.9rem; }
.course-price { font-size: 1.1rem; }
.course-price span:last-child { font-size: 1.3rem; }
.message-box { margin-bottom: 25px; }
.no-courses-message { font-size: 1.1rem; padding: 40px 15px; }
}
@media (max-width: 480px) {
.hero-section-courses { min-height: 35vh; padding: 80px 15px 40px; }
.hero-content-courses h1 { font-size: 2rem; }
.hero-content-courses p { font-size: 0.9rem; }
.courses-listing-section { padding: 60px 0; }
.course-header-card h3 { font-size: 1.2rem; }
.course-body-card { padding: 20px; }
.course-body-card p { font-size: 0.85rem; margin-bottom: 20px; }
.course-features-list { margin: 0 0 20px 0; padding-top: 15px; }
.course-features-list li { font-size: 0.85rem; gap: 8px;}
.course-price { font-size: 1rem; padding: 15px 0; }
.course-price span:last-child { font-size: 1.1rem; }
.course-actions-card .btn { padding: 12px 20px; font-size: 0.9rem; }
.message-box { font-size: 0.9rem; padding: 12px 15px; }
}
/* Custom CSS for Courses Page */
/* --- Courses Page Hero Section --- */
.hero-section-courses {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 50vh; /* Shorter hero for inner pages */
text-align: center;
background: var(--navy-blue); /* Solid color background */
color: var(--white);
}
.hero-content-courses {
padding-top: 120px; /* Add padding to account for fixed header */
}
.hero-content-courses h1 {
font-size: 4rem;
font-weight: 800;
color: var(--white);
margin-bottom: 20px;
}
.hero-content-courses p {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.8);
max-width: 700px;
margin: 0 auto;
}
/* --- Course Card Styles --- */
.courses-section {
padding: 80px 0;
background-color: var(--light-grey);
}
.courses-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 40px;
}
.course-card {
background-color: var(--white);
border-radius: var(--border-radius-lg);
overflow: hidden;
box-shadow: var(--card-shadow);
transition: transform var(--transition-speed), box-shadow var(--transition-speed);
display: flex;
flex-direction: column;
}
.course-card:hover {
transform: translateY(-10px);
box-shadow: var(--card-hover-shadow);
}
.course-header-card {
background: var(--navy-blue);
color: var(--white);
padding: 25px 30px;
border-top-left-radius: var(--border-radius-lg);
border-top-right-radius: var(--border-radius-lg);
}
.course-header-card h3 {
color: var(--white);
font-size: 1.6rem;
margin: 0;
}
.course-body-card {
padding: 30px;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.course-body-card p {
font-size: 1rem;
color: var(--light-text);
line-height: 1.6;
margin-bottom: 25px;
flex-grow: 1;
}
.course-features-list {
list-style: none;
padding: 0;
margin: 0 0 20px 0;
border-bottom: 1px solid var(--medium-grey);
padding-bottom: 20px;
}
.course-features-list li {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 15px;
font-weight: 500;
color: var(--dark-text);
}
.course-features-list li:last-child {
margin-bottom: 0;
}
.course-features-list i {
color: var(--teal-accent);
font-size: 1.1rem;
}
.course-meta {
display: flex;
justify-content: space-between;
/* align-items: baseline; */
font-size: 1rem;
color: var(--light-text);
margin-top: auto;
}
.course-price {
font-size: 1.4rem;
font-weight: 700;
color: var(--coral-orange);
}
.course-actions .btn {
width: 100%;
}
/* --- Session Messages and Info Text --- */
.message-box {
padding: 20px;
border-radius: 12px;
font-weight: 600;
margin-bottom: 30px;
text-align: center;
}
.success-message {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.info-message {
background-color: #d1ecf1;
color: #0c5460;
border: 1px solid #bee5eb;
}
.error-message {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.no-courses-message {
text-align: center;
color: var(--dark-text);
font-size: 1.3rem;
padding: 50px 20px;
background-color: var(--white);
border-radius: var(--border-radius-lg);
box-shadow: var(--card-shadow);
}
/* --- Responsive adjustments for courses page --- */
@media (max-width: 992px) {
.hero-section-courses {
min-height: 45vh;
padding: 100px 20px 50px;
}
.hero-content-courses h1 {
font-size: 2.5rem;
}
.hero-content-courses p {
font-size: 1rem;
}
.courses-grid {
grid-template-columns: 1fr; /* Single column on smaller screens */
gap: 25px;
}
.course-header-card {
padding: 20px 25px;
}
.course-header-card h3 {
font-size: 1.4rem;
}
.course-body-card p {
font-size: 0.95rem;
}
.course-features-list li {
font-size: 0.9rem;
}
.course-price {
font-size: 1.1rem;
}
.course-price span:last-child {
font-size: 1.3rem;
}
.message-box {
margin-bottom: 25px;
}
.no-courses-message {
font-size: 1.1rem;
padding: 40px 15px;
}
}
@media (max-width: 480px) {
.hero-section-courses {
min-height: 35vh;
padding: 80px 15px 40px;
}
.hero-content-courses h1 {
font-size: 2rem;
}
.hero-content-courses p {
font-size: 0.9rem;
}
}
/* Custom Styles for About Us Page */
/* --- Variables --- */
/* --- Hero Section - About Us --- */
.hero-section-about {
position: relative;
padding: 180px 0 100px;
background-image: linear-gradient(135deg, var(--navy-blue) 0%, #304E6A 100%);
color: var(--white);
text-align: center;
overflow: hidden;
min-height: 70vh;
display: flex;
align-items: center;
justify-content: center;
}
/* .hero-bg-dynamic-about {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('{{ asset('web_assets/assets/images/dynamic-bg-about.svg') }}');
background-size: cover;
background-position: center;
opacity: 0.1;
} */
.hero-content-about {
position: relative;
z-index: 2;
max-width: 800px;
margin: auto;
}
.hero-content-about h1 {
font-size: 3.5rem;
font-weight: 800;
margin-bottom: 20px;
line-height: 1.2;
color: var(--white);
}
.hero-content-about h1 .highlight-accent {
color: var(--teal-accent);
}
.hero-content-about p {
font-size: 1.25rem;
font-weight: 300;
line-height: 1.6;
color: rgba(255, 255, 255, 0.8);
max-width: 600px;
margin: auto;
}
/* --- Section Headers --- */
.section-header {
text-align: center;
margin-bottom: 50px;
}
.section-header .sub-heading {
display: inline-block;
color: var(--teal-accent);
font-size: 1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
margin-bottom: 10px;
}
.section-header .section-title {
font-size: 2.5rem;
font-weight: 700;
color: var(--dark-text);
margin-bottom: 15px;
}
.section-header .section-title .highlight-primary {
color: var(--navy-blue);
}
/* --- Mission & Vision Section --- */
.mission-section {
padding: 80px 0;
background-color: var(--light-grey);
}
.mission-content-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.mission-card {
background-color: var(--white);
padding: 40px;
border-radius: var(--border-radius-lg);
box-shadow: var(--card-shadow);
transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}
.mission-card:hover {
transform: translateY(-10px);
box-shadow: var(--card-hover-shadow);
}
.mission-card i {
font-size: 3rem;
color: var(--teal-accent);
margin-bottom: 20px;
}
.mission-card h3 {
font-size: 1.5rem;
font-weight: 700;
color: var(--navy-blue);
margin-bottom: 15px;
}
/* --- Team Section --- */
.team-section {
padding: 80px 0;
}
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
}
.team-member-card {
background-color: var(--white);
border-radius: var(--border-radius-lg);
box-shadow: var(--card-shadow);
padding: 30px;
text-align: center;
transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}
.team-member-card:hover {
transform: translateY(-10px);
box-shadow: var(--card-hover-shadow);
}
.team-img-container {
width: 150px;
height: 150px;
border-radius: 50%;
overflow: hidden;
margin: 0 auto 20px;
border: 4px solid var(--teal-accent);
box-shadow: 0 0 0 5px rgba(0, 201, 167, 0.2);
}
.team-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.team-member-card h3 {
font-size: 1.4rem;
font-weight: 700;
color: var(--navy-blue);
margin-bottom: 5px;
}
.team-member-card .role {
display: block;
color: var(--light-text);
font-size: 0.9rem;
margin-bottom: 15px;
font-style: italic;
}
.team-member-card p {
font-size: 0.95rem;
color: var(--light-text);
line-height: 1.6;
margin-bottom: 20px;
}
.team-social a {
color: var(--dark-text);
margin: 0 8px;
transition: color var(--transition-speed);
}
.team-social a:hover {
color: var(--teal-accent);
}
/* --- CTA Section - About Us --- */
.cta-about-section {
position: relative;
background-image: linear-gradient(135deg, var(--teal-accent) 0%, #35D0BB 100%);
color: var(--white);
padding: 80px 0;
text-align: center;
}
.cta-about-section h2 {
font-size: 2.5rem;
font-weight: 800;
margin-bottom: 15px;
}
.cta-about-section p {
font-size: 1.15rem;
font-weight: 300;
max-width: 700px;
margin: auto;
margin-bottom: 30px;
}
/* --- Contact Page Specific Styles (integrated for consistency) --- */
.contact-form-section {
padding: 80px 0;
background-color: var(--white);
}
.contact-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: flex-start;
}
.contact-details-container h3 {
font-size: 1.8rem;
color: var(--navy-blue);
margin-bottom: 20px;
}
.contact-details-container p {
color: var(--light-text);
margin-bottom: 25px;
}
.contact-list {
list-style: none;
padding: 0;
margin-bottom: 30px;
}
.contact-list li {
display: flex;
align-items: center;
color: var(--dark-text);
font-size: 1rem;
margin-bottom: 15px;
}
.contact-list li i {
color: var(--teal-accent);
margin-right: 15px;
font-size: 1.2rem;
}
.social-links-contact a {
color: var(--dark-text);
margin-right: 15px;
font-size: 1.5rem;
transition: color var(--transition-speed);
}
.social-links-contact a:hover {
color: var(--teal-accent);
}
.map-section {
padding-bottom: 80px;
}
.map-placeholder {
width: 100%;
height: 450px;
border-radius: var(--border-radius-lg);
overflow: hidden;
box-shadow: var(--card-shadow);
}
/* --- Contact Form Styles --- */
.contact-form-container {
background-color: var(--white);
padding: 40px;
border-radius: var(--border-radius-lg);
box-shadow: var(--card-shadow);
}
.contact-form-container .form-group {
margin-bottom: 25px;
}
.contact-form-container label {
display: block;
font-size: 1rem;
font-weight: 600;
color: var(--dark-text);
margin-bottom: 8px;
}
.contact-form-container input[type="text"],
.contact-form-container input[type="email"],
.contact-form-container textarea {
width: 100%;
padding: 15px 20px;
border: 1px solid var(--medium-grey);
border-radius: 10px;
background-color: var(--light-grey);
font-size: 1rem;
color: var(--dark-text);
transition: all var(--transition-speed);
}
.contact-form-container input:focus,
.contact-form-container textarea:focus {
outline: none;
border-color: var(--teal-accent);
box-shadow: 0 0 0 4px rgba(0, 201, 167, 0.2);
background-color: var(--white);
}
.contact-form-container textarea {
resize: vertical;
}
/* Style for the button */
.contact-form-container .btn {
width: 100%;
font-size: 1.1rem;
padding: 15px;
}
/* Ensure the contact wrapper is flexible on smaller screens */
@media (max-width: 768px) {
.contact-wrapper {
grid-template-columns: 1fr;
gap: 30px;
}
.contact-form-container {
padding: 30px;
}
}
/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
.hero-content-about h1 {
font-size: 2.8rem;
}
.hero-content-about p {
font-size: 1.1rem;
}
.section-header .section-title {
font-size: 2rem;
}
.contact-wrapper {
grid-template-columns: 1fr;
}
}
/* --- Contact Details Card Styles --- */
.contact-card {
background-color: var(--white);
padding: 80px;
border-radius: var(--border-radius-lg);
box-shadow: var(--card-shadow);
transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}
.contact-card:hover {
transform: translateY(-5px);
box-shadow: var(--card-hover-shadow);
}
.contact-card h3 {
font-size: 1.8rem;
color: var(--navy-blue);
margin-bottom: 20px;
}
.contact-card p {
color: var(--light-text);
margin-bottom: 25px;
}
.contact-list {
list-style: none;
padding: 0;
margin-bottom: 30px;
}
.contact-list li {
display: flex;
align-items: flex-start;
color: var(--dark-text);
font-size: 1rem;
margin-bottom: 15px;
}
.contact-list li i {
color: var(--teal-accent);
margin-right: 15px;
font-size: 1.2rem;
margin-top: 3px; /* Adjust for icon alignment */
}
.social-links-contact a {
color: var(--dark-text);
margin-right: 15px;
font-size: 1.5rem;
transition: color var(--transition-speed);
}
.social-links-contact a:hover {
color: var(--teal-accent);
}
.contact-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 50px;
align-items: stretch; /* This change makes both cards the same height */
}
/* Custom CSS for InnovateEdu - Login Page */
/* --- Variables (ensure these are consistent with templatemo-eduwell-style.css) --- */
/* Custom CSS for InnovateEdu - Login Page */
/* --- Variables (ensure these are consistent with templatemo-eduwell-style.css) --- */
/* --- Login Section Layout --- */
/* Custom CSS for InnovateEdu - Login Page */
/* --- Variables (ensure these are consistent with templatemo-eduwell-style.css) --- */
/* --- Login Section Layout --- */
.login-section {
position: relative; /* Needed for absolute positioning of background */
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh; /* Full viewport height */
padding: 100px 20px; /* Top padding for header, general side padding */
overflow: hidden; /* Hide overflow of background animation */
}
/* --- Animated Background for Login Page (like homepage hero) --- */
.hero-bg-dynamic {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* Enhanced gradient with more depth and subtle texture */
background: linear-gradient(135deg, var(--navy-blue) 0%, #2A4058 30%, #2F5A6C 70%, var(--teal-accent) 100%);
background-size: 500% 500%; /* Larger background size for more dynamic shift */
animation: gradientShift 25s ease infinite; /* Slower, smoother animation */
z-index: -1; /* Ensure it stays behind the login card */
/* Adding a subtle overlay texture */
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;charset=utf8,');
background-repeat: repeat;
opacity: 0.5; /* Subtle texture opacity */
}
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.login-card {
background-color: var(--white);
padding: 45px; /* Increased padding */
border-radius: var(--border-radius-lg); /* Consistent rounded corners */
box-shadow: var(--card-shadow); /* Soft shadow */
max-width: 500px; /* Increased width of the card */
width: 115%;
text-align: center;
transition: transform var(--transition-speed), box-shadow var(--transition-speed);
position: relative; /* Ensure card content is above the background */
z-index: 1;
margin-top: 50px; /* Added top margin to the card */
}
.login-card:hover {
transform: translateY(-5px); /* Subtle lift on hover */
box-shadow: var(--card-hover-shadow); /* More pronounced shadow on hover */
}
/* --- Logo & Title --- */
.logo-container {
margin-bottom: 30px; /* More space below logo */
display: flex;
justify-content: center;
}
.login-logo-text {
font-family: var(--font-heading);
font-size: 2.2rem;
font-weight: 800;
color: var(--dark-text);
text-decoration: none;
letter-spacing: -0.5px;
display: flex; /* Allow span to take color */
align-items: baseline;
gap: 8px; /* Space between "Student" and "Login" */
}
.login-logo-text span {
color: var(--teal-accent); /* Highlight "Login" */
}
/* --- Session Messages --- */
.message-box {
padding: 18px 25px;
border-radius: 12px;
margin-bottom: 30px;
font-size: 1.1rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 15px;
animation: fadeInScale 0.5s ease-out forwards;
opacity: 0; /* Start hidden for animation */
transform: scale(0.95); /* Start slightly smaller */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
text-align: left; /* Align text within message box */
}
.message-box.active {
opacity: 1;
visibility: visible;
transform: scale(1) translateY(0);
}
.message-box.fade-out {
animation: fadeOutScale 1s ease-out forwards;
}
@keyframes fadeInScale {
from { opacity: 0; transform: scale(0.95) translateY(20px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes fadeOutScale {
from { opacity: 1; transform: scale(1); }
to { opacity: 0; transform: scale(0.95) translateY(-20px); }
}
.success-message {
background-color: #e6ffed; /* Light green */
color: #28a745; /* Dark green */
border: 1px solid #c3e6cb;
}
.success-message::before { content: "\f058"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 1.3em;}
.error-message {
background-color: #fcebeb; /* Light red */
color: #dc3545; /* Dark red */
border: 1px solid #f5c6cb;
}
.error-message::before { content: "\f06a"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 1.3em;}
/* --- Form Elements --- */
.login-form .form-group-custom {
margin-bottom: 25px; /* Increased spacing between form groups */
text-align: left; /* Align labels and inputs to the left */
}
.login-form label {
display: block;
font-size: 0.95rem; /* Slightly larger label font */
font-weight: 600;
color: var(--dark-text);
margin-bottom: 10px; /* Space between label and input */
}
.input-field {
width: 100%;
padding: 15px 20px;
border: 1px solid var(--medium-grey); /* Subtle border */
border-radius: 12px; /* More rounded corners for inputs */
background-color: var(--light-grey); /* Light grey background */
font-size: 1rem;
color: var(--dark-text);
transition: all var(--transition-speed);
box-shadow: inset 0 1px 3px rgba(0,0,0,0.06); /* Subtle inner shadow */
}
.input-field::placeholder {
color: var(--light-text);
opacity: 0.7;
}
.input-field:focus {
outline: none;
border-color: var(--teal-accent); /* Teal border on focus */
box-shadow: 0 0 0 4px rgba(0, 201, 167, 0.2), inset 0 1px 3px rgba(0,0,0,0.06); /* Teal glow + inner shadow */
background-color: var(--white); /* White background on focus */
}
.help-block.error-message-text {
color: var(--coral-orange); /* Error text color */
font-size: 0.85rem;
margin-top: 8px; /* Space above error message */
display: block;
}
/* --- Checkbox --- */
.checkbox-group {
display: flex;
justify-content: flex-start; /* Align checkbox to the left */
align-items: center;
margin-bottom: 30px; /* Space below checkbox group */
}
.checkbox-label {
font-size: 0.95rem;
color: var(--light-text);
cursor: pointer;
display: flex;
align-items: center;
}
.checkbox-label input[type="checkbox"] {
appearance: none; /* Hide default checkbox */
width: 20px;
height: 20px;
border: 2px solid var(--medium-grey);
border-radius: 6px;
margin-right: 10px;
cursor: pointer;
position: relative;
transition: all var(--transition-speed);
}
.checkbox-label input[type="checkbox"]:checked {
background-color: var(--teal-accent);
border-color: var(--teal-accent);
}
.checkbox-label input[type="checkbox"]:checked::after {
content: '\f00c'; /* Font Awesome check icon */
font-family: "Font Awesome 5 Free";
font-weight: 900;
color: var(--white);
font-size: 14px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* --- Buttons & Links --- */
.login-btn {
/* Uses existing .btn and .btn-primary styles from templatemo-eduwell-style.css */
width: 100%;
padding: 15px;
font-size: 1.1rem;
margin-top: 10px; /* Space below button */
}
.link-text-center {
margin-top: 25px; /* Space above "Not registered?" link */
font-size: 0.95rem;
color: var(--light-text);
}
.link-text-center a,
.link-text {
color: var(--navy-blue); /* Dark blue for links */
font-weight: 600;
text-decoration: none;
transition: color var(--transition-speed);
}
.link-text-center a:hover,
.link-text:hover {
color: var(--teal-accent); /* Teal on hover */
text-decoration: underline; /* Underline on hover for better UX */
}
.form-group-custom.text-center {
margin-top: 30px; /* Space above "Forgot Password?" */
margin-bottom: 0; /* No bottom margin for the last group */
}
/* --- Responsive Adjustments --- */
@media (max-width: 480px) {
.login-card {
padding: 30px;
max-width: 100%; /* Ensure full width on very small screens */
}
.login-logo-text {
font-size: 1.8rem;
}
.message-box {
font-size: 0.95rem;
padding: 12px 18px;
}
.login-form label {
font-size: 0.9rem;
}
.input-field {
padding: 12px 15px;
font-size: 0.9rem;
}
.login-btn {
padding: 12px;
font-size: 1rem;
}
.link-text-center, .link-text {
font-size: 0.9rem;
}
}
/* Custom CSS for InnovateEdu - Register Page */
/* --- Variables (ensure these are consistent with templatemo-eduwell-style.css) --- */
/* --- Register Section Layout --- */
.register-section {
position: relative; /* Needed for absolute positioning of background */
display: flex;
flex-direction: column; /* Allow header and card to stack */
justify-content: center;
align-items: center;
min-height: 100vh; /* Full viewport height */
padding: 100px 20px; /* Top padding for header, general side padding */
overflow: hidden; /* Hide overflow of background animation */
}
/* --- Animated Background for Register Page (like homepage hero) --- */
.hero-bg-dynamic {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* Enhanced gradient with more depth and subtle texture */
background: linear-gradient(135deg, var(--navy-blue) 0%, #2A4058 30%, #2F5A6C 70%, var(--teal-accent) 100%);
background-size: 500% 500%; /* Larger background size for more dynamic shift */
animation: gradientShift 25s ease infinite; /* Slower, smoother animation */
z-index: -1; /* Ensure it stays behind the register card */
/* Adding a subtle overlay texture */
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;charset=utf8,');
background-repeat: repeat;
opacity: 0.5; /* Subtle texture opacity */
}
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* --- Section Header (for "Course Registration") --- */
.register-section .section-header {
text-align: center;
margin-bottom: 40px; /* Space above the registration card */
max-width: 700px;
position: relative;
z-index: 1; /* Ensure it's above the background */
color: var(--white); /* Text color for header over animated background */
}
.register-section .section-subtitle {
font-size: 1.1rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--coral-orange); /* Highlight color for subtitle */
display: block;
margin-bottom: 10px;
}
.register-section .section-title {
font-size: 3rem; /* Larger title */
font-weight: 800;
color: var(--white); /* White text for main title */
margin: 0;
}
.register-section .section-title span {
color: var(--teal-accent); /* Accent color for "Registration" */
}
/* --- Register Card --- */
.register-card {
background-color: var(--white);
padding: 45px;
border-radius: var(--border-radius-lg);
box-shadow: var(--card-shadow);
max-width: 800px; /* Wider card for more form fields */
width: 100%;
text-align: center;
transition: transform var(--transition-speed), box-shadow var(--transition-speed);
position: relative;
z-index: 1;
margin-top: 30px; /* Margin from the section header */
}
.register-card:hover {
transform: translateY(-5px);
box-shadow: var(--card-hover-shadow);
}
/* --- Form Row Layout --- */
.register-card .row {
display: flex;
flex-wrap: wrap; /* Allow columns to wrap on smaller screens */
margin: 0 -15px; /* Counteract column padding */
}
.register-card .col-md-6 {
flex: 0 0 50%; /* Two columns by default */
max-width: 50%;
padding: 0 15px; /* Spacing between columns */
}
/* --- Form Group Styling (reused from login) --- */
.form-group-custom {
margin-bottom: 25px;
text-align: left;
}
.form-group-custom label {
display: block;
font-size: 0.95rem;
font-weight: 600;
color: var(--dark-text);
margin-bottom: 10px;
}
.input-field {
width: 100%;
padding: 15px 20px;
border: 1px solid var(--medium-grey);
border-radius: 12px;
background-color: var(--light-grey);
font-size: 1rem;
color: var(--dark-text);
transition: all var(--transition-speed);
box-shadow: inset 0 1px 3px rgba(0,0,0,0.06);
}
.input-field::placeholder {
color: var(--light-text);
opacity: 0.7;
}
.input-field:focus {
outline: none;
border-color: var(--teal-accent);
box-shadow: 0 0 0 4px rgba(0, 201, 167, 0.2), inset 0 1px 3px rgba(0,0,0,0.06);
background-color: var(--white);
}
.textarea-field {
min-height: 100px; /* Standard height for textareas */
resize: vertical; /* Allow vertical resizing */
}
/* --- Buttons & Links --- */
.register-btn {
width: 100%;
padding: 15px;
font-size: 1.1rem;
margin-top: 10px;
}
.link-text-center {
margin-top: 25px;
font-size: 0.95rem;
color: var(--light-text);
}
.link-text-center a {
color: var(--navy-blue);
font-weight: 600;
text-decoration: none;
transition: color var(--transition-speed);
}
.link-text-center a:hover {
color: var(--teal-accent);
text-decoration: underline;
}
/* --- Message Boxes (reused from login) --- */
.message-box {
padding: 18px 25px;
border-radius: 12px;
margin-bottom: 30px;
font-size: 1.1rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 15px;
animation: fadeInScale 0.5s ease-out forwards;
opacity: 0; /* Start hidden for animation */
transform: scale(0.95); /* Start slightly smaller */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
text-align: left; /* Align text within message box */
}
.message-box.active {
opacity: 1;
visibility: visible;
transform: scale(1) translateY(0);
}
.message-box.fade-out {
animation: fadeOutScale 1s ease-out forwards;
}
@keyframes fadeInScale {
from { opacity: 0; transform: scale(0.95) translateY(20px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes fadeOutScale {
from { opacity: 1; transform: scale(1); }
to { opacity: 0; transform: scale(0.95) translateY(-20px); }
}
.message-box ul {
list-style: none;
padding: 0;
margin: 0;
}
.message-box li {
margin-bottom: 5px;
}
.message-box li:last-child {
margin-bottom: 0;
}
.error-message {
background-color: #fcebeb; /* Light red */
color: #dc3545; /* Dark red */
border: 1px solid #f5c6cb;
}
.error-message::before {
content: "\f06a"; /* Exclamation icon */
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 1.3em;
}
/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
.register-card {
padding: 30px;
max-width: 95%; /* Adjust max-width for smaller screens */
margin-top: 20px;
}
.register-card .col-md-6 {
flex: 0 0 100%; /* Stack columns on small screens */
max-width: 100%;
}
.register-section .section-title {
font-size: 2.2rem;
}
.register-section .section-subtitle {
font-size: 0.9rem;
}
.form-group-custom {
margin-bottom: 20px;
}
.input-field, .textarea-field {
padding: 12px 15px;
font-size: 0.9rem;
}
.register-btn {
padding: 12px;
font-size: 1rem;
}
.link-text-center {
margin-top: 20px;
font-size: 0.9rem;
}
.message-box {
font-size: 0.95rem;
padding: 15px 20px;
}
}
@media (max-width: 480px) {
.register-card {
padding: 25px;
}
.register-section .section-title {
font-size: 1.8rem;
}
.register-section .section-subtitle {
letter-spacing: 1px;
}
.message-box {
font-size: 0.85rem;
padding: 10px 15px;
}
}
/* --- Page-Specific Hero Section --- */
.hero-section-courses { /* Reusing the courses hero section for consistency */
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 50vh; /* Shorter hero for inner pages */
overflow: hidden;
text-align: center;
padding: 150px 20px 80px;
background-color: var(--navy-blue); /* Fallback background */
}
.hero-bg-dynamic-courses { /* Reusing dynamic background from courses page */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, #1A2C42 0%, #2F5A6C 50%, var(--teal-accent) 100%);
background-size: 300% 300%;
animation: gradientShiftCourses 22s ease infinite; /* Unique animation */
z-index: -1;
&::after { /* Subtle texture overlay */
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;charset=utf8,');
background-repeat: repeat;
opacity: 0.7;
}
}
@keyframes gradientShiftCourses {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.hero-content-courses {
max-width: 800px;
position: relative;
z-index: 2;
color: var(--white);
}
.hero-content-courses h1 {
font-size: 4.5rem; /* Large, impactful heading */
font-weight: 800;
color: var(--white);
margin-bottom: 20px;
line-height: 1.1;
}
.hero-content-courses h1 span {
color: var(--coral-orange); /* Using coral for highlight on this page */
}
.hero-content-courses p {
font-size: 1.35rem; /* Readable subtitle */
color: rgba(255, 255, 255, 0.9);
max-width: 600px;
margin: 0 auto;
}
/* --- Page-Specific Hero Section --- */
.hero-section-courses { /* Reusing the courses hero section for consistency */
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 50vh; /* Shorter hero for inner pages */
overflow: hidden;
text-align: center;
padding: 150px 20px 80px;
background-color: var(--navy-blue); /* Fallback background */
}
.hero-bg-dynamic-courses { /* Reusing dynamic background from courses page */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, #1A2C42 0%, #2F5A6C 50%, var(--teal-accent) 100%);
background-size: 300% 300%;
animation: gradientShiftCourses 22s ease infinite; /* Unique animation */
z-index: -1;
&::after { /* Subtle texture overlay */
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;charset=utf8,');
background-repeat: repeat;
opacity: 0.7;
}
}
@keyframes gradientShiftCourses {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.hero-content-courses {
max-width: 800px;
position: relative;
z-index: 2;
color: var(--white);
}
.hero-content-courses h1 {
font-size: 4.5rem; /* Large, impactful heading */
font-weight: 800;
color: var(--white);
margin-bottom: 20px;
line-height: 1.1;
}
.hero-content-courses h1 span {
color: var(--coral-orange); /* Using coral for highlight on this page */
}
.hero-content-courses p {
font-size: 1.35rem; /* Readable subtitle */
color: rgba(255, 255, 255, 0.9);
max-width: 600px;
margin: 0 auto;
}
/* --- Cart Section Styling --- */
.cart-section {
background-color: var(--light-grey);
padding: 100px 0; /* Consistent section padding */
}
.cart-content-wrapper {
/* Removed grid layout to stack elements vertically */
display: block; /* Ensures it's a block-level element */
}
.cart-table-container {
background-color: var(--white);
border-radius: var(--border-radius-lg);
box-shadow: var(--card-shadow);
padding: 30px;
overflow-x: auto; /* Allow horizontal scrolling for table on small screens */
margin-bottom: 40px; /* Space below the table before summary */
}
.cart-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
font-size: 1rem;
color: var(--dark-text);
}
.cart-table th, .cart-table td {
padding: 15px;
text-align: left;
border-bottom: 1px solid var(--medium-grey);
}
.cart-table th {
background-color: var(--navy-blue);
color: var(--white);
font-weight: 700;
text-transform: uppercase;
font-size: 0.9rem;
letter-spacing: 0.5px;
}
.cart-table tbody tr:last-child td {
border-bottom: none;
}
.cart-table tbody tr:hover {
background-color: #f8f8f8;
}
.cart-table td {
vertical-align: middle;
}
.cart-table td .btn-danger {
padding: 8px 15px;
font-size: 0.85rem;
border-radius: 8px;
display: inline-flex;
align-items: center;
gap: 5px;
}
.cart-table td .btn-danger i {
font-size: 0.9em;
}
.cart-table tfoot td {
padding-top: 25px;
font-size: 1.1rem;
font-weight: 700;
color: var(--navy-blue);
border-top: 2px solid var(--teal-accent);
}
.cart-table tfoot td strong {
color: var(--coral-orange);
font-size: 1.4rem;
}
.cart-summary-actions {
background-color: var(--white);
border-radius: var(--border-radius-lg);
box-shadow: var(--card-shadow);
padding: 30px;
display: flex;
flex-direction: column;
gap: 20px;
max-width: 400px; /* Optional: constrain width for summary section */
margin: 0 auto; /* Center the summary actions if max-width is applied */
/* Removed sticky positioning as it's no longer side-by-side */
}
.cart-summary-actions .btn {
width: 100%;
padding: 15px 20px;
font-size: 1rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.btn-outline-alt { /* Style for 'Continue Shopping' */
border-color: var(--navy-blue);
color: var(--navy-blue);
background: transparent;
}
.btn-outline-alt:hover {
background-color: var(--navy-blue);
color: var(--white);
transform: translateY(-3px);
}
/* --- Session Message Boxes --- */
.message-box {
padding: 18px 25px;
border-radius: 12px;
margin-bottom: 30px;
font-size: 1.1rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 15px;
animation: fadeInScale 0.5s ease-out forwards;
opacity: 0; /* Start hidden for animation */
transform: scale(0.95); /* Start slightly smaller */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
text-align: left; /* Align text within message box */
}
.message-box.active {
opacity: 1;
visibility: visible;
transform: scale(1) translateY(0);
}
.message-box.fade-out {
animation: fadeOutScale 1s ease-out forwards;
}
@keyframes fadeInScale {
from { opacity: 0; transform: scale(0.95) translateY(20px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes fadeOutScale {
from { opacity: 1; transform: scale(1); }
to { opacity: 0; transform: scale(0.95) translateY(-20px); }
}
.message-box ul {
list-style: none;
padding: 0;
margin: 0;
}
.message-box li {
margin-bottom: 5px;
}
.message-box li:last-child {
margin-bottom: 0;
}
.success-message {
background-color: #e6ffed; /* Light green */
color: #28a745; /* Dark green */
border: 1px solid #c3e6cb;
}
.success-message::before { content: "\f058"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 1.3em;}
.error-message {
background-color: #fcebeb; /* Light red */
color: #dc3545; /* Dark red */
border: 1px solid #f5c6cb;
}
.error-message::before { content: "\f06a"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 1.3em;}
.info-message {
background-color: #e2f2ff; /* Light blue */
color: #007bff; /* Dark blue */
border: 1px solid #b8daff;
}
.info-message::before { content: "\f05a"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 1.3em;}
.empty-cart-message {
text-align: center;
font-size: 1.3rem;
padding: 60px 20px;
background-color: var(--white);
border-radius: var(--border-radius-lg);
box-shadow: var(--card-shadow);
max-width: 700px;
margin: 50px auto;
}
.empty-cart-message .alert-link {
color: var(--navy-blue);
font-weight: 700;
}
.empty-cart-message .alert-link:hover {
color: var(--teal-accent);
}
/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
.hero-section-courses {
min-height: 40vh;
padding: 120px 20px 60px;
}
.hero-content-courses h1 {
font-size: 3rem;
}
.hero-content-courses p {
font-size: 1.1rem;
}
.cart-content-wrapper {
display: block; /* Ensure it stacks */
}
.cart-section {
padding: 80px 0;
}
.cart-table-container {
padding: 20px;
margin-bottom: 30px; /* Adjusted margin */
}
.cart-table th, .cart-table td {
padding: 12px;
font-size: 0.9rem;
}
.cart-table tfoot td {
font-size: 1rem;
}
.cart-table tfoot td strong {
font-size: 1.2rem;
}
.cart-summary-actions {
padding: 20px;
max-width: 100%; /* Full width on smaller screens */
margin: 0 auto;
top: auto; /* Remove sticky on mobile */
}
.cart-summary-actions .btn {
font-size: 0.95rem;
padding: 12px 15px;
}
.empty-cart-message {
font-size: 1.1rem;
padding: 40px 15px;
}
}
@media (max-width: 768px) {
.hero-section-courses {
min-height: 35vh;
padding: 100px 15px 50px;
}
.hero-content-courses h1 {
font-size: 2.5rem;
}
.hero-content-courses p {
font-size: 1rem;
}
.cart-table-container {
padding: 15px;
}
.cart-table th, .cart-table td {
font-size: 0.85rem;
padding: 10px;
}
.cart-table td .btn-danger {
padding: 6px 10px;
font-size: 0.8rem;
}
.cart-table tfoot td {
font-size: 0.9rem;
}
.cart-table tfoot td strong {
font-size: 1.1rem;
}
.empty-cart-message {
font-size: 1rem;
padding: 30px 10px;
}
}
@media (max-width: 480px) {
.hero-section-courses {
min-height: 30vh;
padding: 80px 10px 40px;
}
.hero-content-courses h1 {
font-size: 2rem;
}
.hero-content-courses p {
font-size: 0.9rem;
}
.cart-section {
padding: 60px 0;
}
/* Hide specific columns for very small screens to save space */
.cart-table th:nth-child(2), .cart-table td:nth-child(2) { /* Course name */
display: none;
}
.cart-table th:nth-child(4), .cart-table td:nth-child(4) { /* Quantity */
display: none;
}
.cart-summary-actions {
padding: 15px;
}
}
/* --- Page-Specific Hero Section (reusing classes from courses page for consistency) --- */
.hero-section-courses {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 50vh; /* Shorter hero for inner pages */
overflow: hidden;
text-align: center;
padding: 150px 20px 80px;
background-color: var(--navy-blue); /* Fallback background */
}
.hero-bg-dynamic-courses { /* Reusing dynamic background from courses page */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, #1A2C42 0%, #2F5A6C 50%, var(--teal-accent) 100%);
background-size: 300% 300%;
animation: gradientShiftCourses 22s ease infinite; /* Unique animation */
z-index: -1;
&::after { /* Subtle texture overlay */
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;charset=utf8,');
background-repeat: repeat;
opacity: 0.7;
}
}
@keyframes gradientShiftCourses {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.hero-content-courses {
max-width: 800px;
position: relative;
z-index: 2;
color: var(--white);
}
.hero-content-courses h1 {
font-size: 4.5rem; /* Large, impactful heading */
font-weight: 800;
color: var(--white);
margin-bottom: 20px;
line-height: 1.1;
}
.hero-content-courses h1 span {
color: var(--coral-orange); /* Using coral for highlight on this page */
}
.hero-content-courses p {
font-size: 1.35rem; /* Readable subtitle */
color: rgba(255, 255, 255, 0.9);
max-width: 600px;
margin: 0 auto;
}
/* --- Orders Section Styling --- */
.orders-section {
background-color: var(--light-grey);
padding: 100px 0; /* Consistent section padding */
}
.orders-table-container {
background-color: var(--white);
border-radius: var(--border-radius-lg);
box-shadow: var(--card-shadow);
padding: 30px;
overflow-x: auto; /* Allow horizontal scrolling for table on small screens */
}
.orders-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 30px; /* Space below the table */
font-size: 1rem;
color: var(--dark-text);
}
.orders-table th, .orders-table td {
padding: 15px;
text-align: left;
border-bottom: 1px solid var(--medium-grey);
}
.orders-table th {
background-color: var(--navy-blue);
color: var(--white);
font-weight: 700;
text-transform: uppercase;
font-size: 0.9rem;
letter-spacing: 0.5px;
}
.orders-table tbody tr:last-child td {
border-bottom: none;
}
.orders-table tbody tr:hover {
background-color: #f8f8f8;
}
.orders-table td {
vertical-align: middle;
}
/* Course list within table */
.orders-table .course-list {
list-style: none;
padding: 0;
margin: 0;
}
.orders-table .course-list li {
margin-bottom: 5px;
font-size: 0.95rem;
color: var(--light-text);
}
.orders-table .course-list li:last-child {
margin-bottom: 0;
}
/* Status Badges */
.status-badge {
display: inline-block;
padding: 8px 15px;
border-radius: 20px;
font-weight: 600;
font-size: 0.85rem;
text-transform: capitalize;
text-align: center;
min-width: 100px;
}
.status-badge-completed {
background-color: #e6ffed; /* Light green */
color: #28a745; /* Dark green */
}
.status-badge-pending {
background-color: #fff3cd; /* Light yellow */
color: #856404; /* Dark yellow */
}
/* Action Buttons */
.orders-table .btn {
padding: 8px 15px;
font-size: 0.85rem;
border-radius: 8px;
display: inline-flex;
align-items: center;
gap: 5px;
}
.orders-table .btn i {
font-size: 0.9em;
}
/* Pagination Styling */
.pagination-container {
display: flex;
justify-content: center;
margin-top: 40px;
}
.pagination {
display: flex;
padding-left: 0;
list-style: none;
border-radius: 0.25rem;
}
.page-item {
margin: 0 5px;
}
.page-link {
position: relative;
display: block;
padding: 0.75rem 1rem;
margin-left: -1px;
line-height: 1.25;
color: var(--navy-blue);
background-color: var(--white);
border: 1px solid var(--medium-grey);
border-radius: 10px;
transition: all var(--transition-speed);
text-decoration: none;
box-shadow: var(--card-shadow);
}
.page-link:hover {
z-index: 2;
color: var(--white);
background-color: var(--teal-accent);
border-color: var(--teal-accent);
box-shadow: 0 5px 15px rgba(0, 201, 167, 0.4);
}
.page-item.active .page-link {
z-index: 3;
color: var(--white);
background-color: var(--teal-accent);
border-color: var(--teal-accent);
box-shadow: 0 5px 15px rgba(0, 201, 167, 0.4);
}
.page-item.disabled .page-link {
color: var(--light-text);
pointer-events: none;
background-color: var(--light-grey);
border-color: var(--medium-grey);
box-shadow: none;
}
/* --- Message Boxes (reused from other pages for consistency) --- */
.message-box {
padding: 18px 25px;
border-radius: 12px;
margin-bottom: 30px;
font-size: 1.1rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 15px;
animation: fadeInScale 0.5s ease-out forwards;
opacity: 0; /* Start hidden for animation */
transform: scale(0.95); /* Start slightly smaller */
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
text-align: left; /* Align text within message box */
}
.message-box.active {
opacity: 1;
visibility: visible;
transform: scale(1) translateY(0);
}
.message-box.fade-out {
animation: fadeOutScale 1s ease-out forwards;
}
@keyframes fadeInScale {
from { opacity: 0; transform: scale(0.95) translateY(20px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes fadeOutScale {
from { opacity: 1; transform: scale(1); }
to { opacity: 0; transform: scale(0.95) translateY(-20px); }
}
.message-box ul {
list-style: none;
padding: 0;
margin: 0;
}
.message-box li {
margin-bottom: 5px;
}
.message-box li:last-child {
margin-bottom: 0;
}
.success-message {
background-color: #e6ffed; /* Light green */
color: #28a745; /* Dark green */
border: 1px solid #c3e6cb;
}
.success-message::before { content: "\f058"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 1.3em;}
.error-message {
background-color: #fcebeb; /* Light red */
color: #dc3545; /* Dark red */
border: 1px solid #f5c6cb;
}
.error-message::before { content: "\f06a"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 1.3em;}
.info-message {
background-color: #e2f2ff; /* Light blue */
color: #007bff; /* Dark blue */
border: 1px solid #b8daff;
}
.info-message::before { content: "\f05a"; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 1.3em;}
/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
.hero-section-courses {
min-height: 40vh;
padding: 120px 20px 60px;
}
.hero-content-courses h1 {
font-size: 3rem;
}
.hero-content-courses p {
font-size: 1.1rem;
}
.orders-section {
padding: 80px 0;
}
.orders-table-container {
padding: 20px;
}
.orders-table th, .orders-table td {
padding: 12px;
font-size: 0.9rem;
}
.status-badge {
min-width: 80px;
padding: 6px 10px;
font-size: 0.8rem;
}
.orders-table .btn {
padding: 6px 10px;
font-size: 0.8rem;
}
.page-link {
padding: 0.6rem 0.8rem;
font-size: 0.9rem;
}
.message-box {
font-size: 1rem;
padding: 15px 20px;
}
}
@media (max-width: 768px) {
.hero-section-courses {
min-height: 35vh;
padding: 100px 15px 50px;
}
.hero-content-courses h1 {
font-size: 2.5rem;
}
.hero-content-courses p {
font-size: 1rem;
}
.orders-table-container {
padding: 15px;
}
.orders-table th, .orders-table td {
font-size: 0.85rem;
padding: 10px;
}
/* Make table rows act as blocks for better stacking on small screens */
.orders-table thead {
display: none; /* Hide table header */
}
.orders-table, .orders-table tbody, .orders-table tr, .orders-table td {
display: block;
width: 100%;
}
.orders-table tr {
margin-bottom: 20px;
border: 1px solid var(--medium-grey);
border-radius: var(--border-radius-lg);
box-shadow: var(--card-shadow);
overflow: hidden;
padding: 15px;
background-color: var(--white);
}
.orders-table td {
text-align: right;
padding-left: 50%; /* Space for data-label */
position: relative;
border-bottom: none;
}
.orders-table td::before {
content: attr(data-label);
position: absolute;
left: 15px;
width: calc(50% - 30px);
white-space: nowrap;
text-align: left;
font-weight: 600;
color: var(--navy-blue);
}
.orders-table tbody tr:last-child td {
border-bottom: none; /* No double border */
}
.orders-table .course-list li {
text-align: right; /* Align course list items to the right */
}
.orders-table .course-list li::before {
content: '- '; /* Simple bullet point for course list */
}
}
@media (max-width: 480px) {
.hero-section-courses {
min-height: 30vh;
padding: 80px 10px 40px;
}
.hero-content-courses h1 {
font-size: 2rem;
}
.hero-content-courses p {
font-size: 0.9rem;
}
.orders-section {
padding: 60px 0;
}
.orders-table tr {
padding: 10px;
}
.orders-table td {
padding: 8px 10px;
padding-left: 40%;
font-size: 0.8rem;
}
.orders-table td::before {
left: 10px;
width: calc(40% - 20px);
font-size: 0.8rem;
}
.status-badge {
font-size: 0.75rem;
padding: 5px 8px;
min-width: 70px;
}
.orders-table .btn {
font-size: 0.75rem;
padding: 5px 8px;
}
.page-link {
padding: 0.5rem 0.7rem;
font-size: 0.8rem;
}
.message-box {
font-size: 0.9rem;
padding: 12px 15px;
}
}
/* --- Page-Specific Hero Section (consistent with other internal pages) --- */
.hero-section-pages {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 50vh; /* Shorter hero for inner pages */
overflow: hidden;
text-align: center;
padding: 150px 20px 80px;
background-color: var(--navy-blue); /* Fallback background */
}
.hero-bg-dynamic-pages { /* Dynamic background for generic pages */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, #1A2C42 0%, #2F5A6C 50%, var(--teal-accent) 100%);
background-size: 300% 300%;
animation: gradientShiftPages 22s ease infinite; /* Unique animation keyframes for this page type */
z-index: -1;
&::after { /* Subtle texture overlay */
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;charset=utf8,');
background-repeat: repeat;
opacity: 0.7;
}
}
@keyframes gradientShiftPages { /* Keyframes for the dynamic background animation */
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.hero-content-pages { /* Content styling for the hero section */
max-width: 800px;
position: relative;
z-index: 2;
color: var(--white);
}
.hero-content-pages h1 {
font-size: 3.5rem; /* Large, impactful heading */
font-weight: 800;
color: var(--white);
margin-bottom: 20px;
line-height: 1.1;
}
.hero-content-pages h1 span {
color: var(--coral-orange); /* Using coral for highlight on this page */
}
/* --- Main Content Section Styling --- */
.get-info {
background-color: var(--white); /* White background for readability */
padding: 100px 0; /* Consistent section padding */
}
.get-info .container {
max-width: 960px; /* Constrain content width for better readability */
margin: 0 auto;
line-height: 1.8;
color: var(--dark-text);
font-size: 1rem;
}
/* Styling for various HTML elements that might come from $page->details */
.get-info h1, .get-info h2, .get-info h3, .get-info h4, .get-info h5, .get-info h6 {
font-family: var(--font-heading);
color: var(--navy-blue);
margin-bottom: 20px;
margin-top: 40px;
line-height: 1.3;
}
.get-info h1 { font-size: 2.8rem; font-weight: 800; }
.get-info h2 { font-size: 2.2rem; font-weight: 700; }
.get-info h3 { font-size: 1.8rem; font-weight: 700; }
.get-info h4 { font-size: 1.5rem; font-weight: 600; }
.get-info h5 { font-size: 1.2rem; font-weight: 600; }
.get-info h6 { font-size: 1rem; font-weight: 600; }
.get-info p {
margin-bottom: 20px;
}
.get-info ul, .get-info ol {
margin-bottom: 20px;
padding-left: 25px;
color: var(--dark-text);
}
.get-info ul li {
list-style: disc;
margin-bottom: 8px;
line-height: 1.6;
}
.get-info ol li {
list-style: decimal;
margin-bottom: 8px;
line-height: 1.6;
}
.get-info a {
color: var(--teal-accent);
text-decoration: none;
font-weight: 600;
transition: color var(--transition-speed);
}
.get-info a:hover {
color: var(--navy-blue);
text-decoration: underline;
}
.get-info strong {
font-weight: 700;
color: var(--dark-text);
}
.get-info blockquote {
border-left: 5px solid var(--teal-accent);
padding: 15px 25px;
margin: 30px 0;
background-color: var(--light-grey);
font-style: italic;
color: var(--light-text);
border-radius: 8px;
}
.get-info table {
width: 100%;
border-collapse: collapse;
margin: 30px 0;
box-shadow: var(--card-shadow);
border-radius: var(--border-radius-lg);
overflow: hidden; /* Ensures rounded corners apply to content */
}
.get-info table th, .get-info table td {
border: 1px solid var(--medium-grey);
padding: 12px 15px;
text-align: left;
}
.get-info table th {
background-color: var(--navy-blue);
color: var(--white);
font-weight: 700;
text-transform: uppercase;
font-size: 0.9rem;
}
.get-info table tbody tr:nth-child(even) {
background-color: var(--light-grey);
}
.get-info table tbody tr:hover {
background-color: #e9e9e9;
}
/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
.hero-section-pages {
min-height: 40vh;
padding: 120px 20px 60px;
}
.hero-content-pages h1 {
font-size: 3rem;
}
.hero-content-pages p {
font-size: 1.1rem;
}
.get-info {
padding: 80px 0;
}
.get-info h1 { font-size: 2.4rem; }
.get-info h2 { font-size: 1.8rem; }
.get-info h3 { font-size: 1.5rem; }
.get-info table th, .get-info table td {
padding: 10px 12px;
font-size: 0.9rem;
}
}
@media (max-width: 768px) {
.hero-section-pages {
min-height: 35vh;
padding: 100px 15px 50px;
}
.hero-content-pages h1 {
font-size: 2.5rem;
}
.hero-content-pages p {
font-size: 1rem;
}
.get-info {
padding: 60px 0;
}
.get-info h1 { font-size: 2rem; }
.get-info h2 { font-size: 1.6rem; }
.get-info h3 { font-size: 1.3rem; }
.get-info .container {
padding: 0 15px; /* Add horizontal padding to container */
}
}
@media (max-width: 480px) {
.hero-section-pages {
min-height: 30vh;
padding: 80px 10px 40px;
}
.hero-content-pages h1 {
font-size: 2rem;
}
.hero-content-pages p {
font-size: 0.9rem;
}
.get-info {
padding: 40px 0;
}
.get-info h1 { font-size: 1.8rem; }
.get-info h2 { font-size: 1.4rem; }
.get-info h3 { font-size: 1.2rem; }
.get-info table, .get-info blockquote {
margin: 20px 0;
}
.get-info table th, .get-info table td {
padding: 8px 10px;
font-size: 0.8rem;
}
}
/* --- Page-Specific Hero Section (consistent with other internal pages) --- */
.hero-section-courses {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 50vh; /* Shorter hero for inner pages */
overflow: hidden;
text-align: center;
padding: 150px 20px 80px;
background-color: var(--navy-blue); /* Fallback background */
}
.hero-bg-dynamic-courses { /* Reusing dynamic background from courses page */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, #1A2C42 0%, #2F5A6C 50%, var(--teal-accent) 100%);
background-size: 300% 300%;
animation: gradientShiftCourses 22s ease infinite; /* Unique animation */
z-index: -1;
&::after { /* Subtle texture overlay */
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('data:image/svg+xml;charset=utf8,');
background-repeat: repeat;
opacity: 0.7;
}
}
@keyframes gradientShiftCourses {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.hero-content-courses {
max-width: 800px;
position: relative;
z-index: 2;
color: var(--white);
}
.hero-content-courses h1 {
font-size: 4.5rem; /* Large, impactful heading */
font-weight: 800;
color: var(--white);
margin-bottom: 20px;
line-height: 1.1;
}
.hero-content-courses h1 span {
color: var(--coral-orange); /* Using coral for highlight on this page */
}
/* --- Thank You Section Styling --- */
.thankyou-section {
background-color: var(--light-grey); /* Lighter background for the card section */
padding: 100px 0; /* Consistent section padding */
display: flex;
justify-content: center;
align-items: center;
}
.thankyou-card {
background-color: var(--white);
border-radius: var(--border-radius-lg);
box-shadow: var(--card-shadow);
padding: 50px;
text-align: center;
max-width: 600px; /* Constrain width for a focused message */
width: 100%;
transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}
.thankyou-card:hover {
transform: translateY(-5px); /* Subtle lift on hover */
box-shadow: var(--card-hover-shadow); /* More pronounced shadow on hover */
}
.thankyou-icon {
font-size: 4rem; /* Large icon */
color: var(--teal-accent); /* Teal color for success */
margin-bottom: 30px;
animation: bounceIn 0.8s ease-out forwards; /* Entrance animation for icon */
}
@keyframes bounceIn {
0% { transform: scale(0.3); opacity: 0; }
50% { transform: scale(1.1); opacity: 1; }
75% { transform: scale(0.9); }
100% { transform: scale(1); opacity: 1; }
}
.thankyou-card h2 {
font-size: 2.5rem;
font-weight: 700;
color: var(--navy-blue);
margin-bottom: 20px;
line-height: 1.2;
}
.thankyou-card p {
font-size: 1.1rem;
color: var(--dark-text);
margin-bottom: 35px;
line-height: 1.6;
}
.thankyou-card .btn {
padding: 15px 30px;
font-size: 1.1rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* --- Responsive Adjustments --- */
@media (max-width: 992px) {
.hero-section-courses {
min-height: 40vh;
padding: 120px 20px 60px;
}
.hero-content-courses h1 {
font-size: 3rem;
}
.thankyou-section {
padding: 80px 0;
}
.thankyou-card {
padding: 40px;
max-width: 90%;
}
.thankyou-icon {
font-size: 3.5rem;
margin-bottom: 25px;
}
.thankyou-card h2 {
font-size: 2rem;
}
.thankyou-card p {
font-size: 1rem;
margin-bottom: 30px;
}
.thankyou-card .btn {
padding: 12px 25px;
font-size: 1rem;
}
}
@media (max-width: 768px) {
.hero-section-courses {
min-height: 35vh;
padding: 100px 15px 50px;
}
.hero-content-courses h1 {
font-size: 2.5rem;
}
.thankyou-section {
padding: 60px 0;
}
.thankyou-card {
padding: 30px;
}
.thankyou-icon {
font-size: 3rem;
margin-bottom: 20px;
}
.thankyou-card h2 {
font-size: 1.8rem;
}
.thankyou-card p {
font-size: 0.95rem;
margin-bottom: 25px;
}
.thankyou-card .btn {
padding: 10px 20px;
font-size: 0.95rem;
}
}
@media (max-width: 480px) {
.hero-section-courses {
min-height: 30vh;
padding: 80px 10px 40px;
}
.hero-content-courses h1 {
font-size: 2rem;
}
.thankyou-section {
padding: 40px 0;
}
.thankyou-card {
padding: 25px;
}
.thankyou-icon {
font-size: 2.5rem;
margin-bottom: 15px;
}
.thankyou-card h2 {
font-size: 1.5rem;
}
.thankyou-card p {
font-size: 0.9rem;
margin-bottom: 20px;
}
.thankyou-card .btn {
padding: 8px 18px;
font-size: 0.9rem;
}
}